<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>03-通过搜索实时显示结果</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo">
        <div class="container" style="width: 300px;">
            <h3>搜索数据</h3>
            <hr>
            <!-- <input type="text" class="form-control" v-model="val" @input="fn"> -->
            <input type="text" class="form-control" v-model="val">
            <table class="table">
                <!-- v-for 遍历数组时，得到的是数组的每一项 -->
                <!-- <tr v-for="item in arr">
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr> -->
                <!-- 如果需要索引 只有两个参数，第二个是索引 -->
                <!-- 小括号可以去掉，但是不规范，不建议 -->
                <tr v-for="(item, index) in arr1">
                    <td>{{ index }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                val: '',
                arr: [
                    { id: 1, name: '德玛', age: 20 },
                    { id: 2, name: '德玛皇子', age: 20 },
                    { id: 3, name: '探险家', age: 21 },
                    { id: 4, name: '大发明家', age: 40 },
                    { id: 5, name: '维克多', age: 60 }
                ],
                arr1: []
            },
            // methods: {
            //     fn() {
            //         this.arr = this.arr.filter(item => item.name.includes(this.val))
            //     }
            // },
            watch: {
                // val(str) {
                //     this.arr1 = this.arr.filter(item => item.name.includes(str))
                // }
                val: {
                    handler(str) {
                        this.arr1 = this.arr.filter(item => item.name.includes(str))
                    },
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>